export
// 声明英雄类
class Hero {
    constructor(value, heros) {
        this.game = document.querySelector('.game')
        // 接收用户名
        this.value = value
        this.heros = heros //传入所有英雄
        // 创建全局文档碎片
        this.ponds = document.createDocumentFragment()
        this.initData() //初始化数据
    }
    // 初始化数据
    initData() {
        // 筛选角色名称
        this.role = this.heros.map(item => item.hero)
        // 筛选角色小头像
        this.icos = this.heros.map(item => item.ico)
        // 筛选当前角色(默认亚瑟角色)
        this.currentRole = this.heros.find(item => item.hero === '亚瑟')
        // 渲染左边部分
        this.domRender()
        this.ponds.appendChild(this.heroBtn)
        this.ponds.appendChild(this.heroContainer)
        this.ponds.appendChild(this.skinBtn)
        this.ponds.appendChild(this.skinContainer)
        this.ponds.appendChild(this.skinShow);
        this.ponds.appendChild(this.userView)
        // 创建背景图片
        this.bgImg = document.createElement('img')
        this.bgImg.src = './sources/chiose.JPG'
        // 添加到全局文档碎片中
        this.ponds.appendChild(this.bgImg)
    }
    // 渲染函数
    domRender() {
        // 创建英雄栏按钮
        this.heroBtn = document.createElement('button')
        this.heroBtn.setAttribute('class', 'heroBtn')
        this.heroBtn.textContent = '英雄'
        // 创建英雄池容器
        this.heroContainer = document.createElement('div')
        this.heroContainer.setAttribute('class', 'heroContainer')
        // 创建英雄预览池
        this.heroView = document.createElement('div')
        this.heroView.setAttribute('class', 'heroView')
        // 循环创建英雄
        let con = document.createDocumentFragment()
        this.role.forEach((item, index) => {
            // 创建英雄
            this.heroItem = document.createElement('div')
            this.heroItem.setAttribute('class', 'heroItem')
            // 创建img
            this.heroItemImg = document.createElement('img')
            this.heroItemImg.src = this.icos[index]
            // 给图片绑定事件
            this.heroItemImg.onclick = () => {
                this.currentRole = this.heros[index]
                this.skinItemShow()
                this.heroItemRender()
                this.createSkillBox()
            }
            // 创建英雄名字标签
            this.heroName = document.createElement('span')
            this.heroName.textContent = item
            // 将img和name添加到heroItem中
            this.heroItem.appendChild(this.heroItemImg)
            this.heroItem.appendChild(this.heroName)
            // 将创建的英雄添加到文档碎片中
            con.appendChild(this.heroItem)
        })
        // 将创建的英雄碎片一次添加到英雄池中
        this.heroView.appendChild(con)
        this.heroContainer.appendChild(this.heroView)
        // 创建皮肤栏
        this.createSikns()
        // 创建皮肤展示盒子
        this.createSkinShowBox()
        // 创建右边头像名字和技能容器
        this.createRightEquip()
    }

    // 创建皮肤栏
    createSikns() {
        // 创建皮肤按钮
        this.skinBtn = document.createElement('button')
        this.skinBtn.textContent = '皮肤'
        this.skinBtn.setAttribute('class', 'skinBtn')
        // 给皮肤按钮添加事件
        this.skinBtn.onclick = () => {
            this.heroContainer.style.display = 'none'
            this.skinContainer.style.display = 'block'
            this.createSkinBar()
        }
        // 创建皮肤容器
        this.skinContainer = document.createElement('div')
        this.skinContainer.setAttribute('class', 'skinContainer')
    }

    // 创建皮肤栏
    createSkinBar() {
        // 创建皮肤容器内的包裹容器
        this.skinView = document.createElement('div')
        this.skinView.setAttribute('class', 'skinView')
        // 循环创建皮肤列表
        // 创建文档碎片
        let cons = document.createDocumentFragment()
        this.currentRole.skins.forEach((item, idx) => {
            // 创建英雄皮肤容器
            this.skinItem = document.createElement('div')
            this.skinItem.setAttribute('class', 'skinItem')
            // 创建图片
            this.skinImg = document.createElement('img')
            this.skinImg.src = item.skinSrc
            this.skinImg.onclick = () => {
                this.skinShowImg.src = this.currentRole.skins[idx].skinBig
                this.selectHero.src = this.currentRole.skins[idx].skinSrc
            }
            // 创建皮肤名称
            this.skinName = document.createElement('span')
            this.skinName.textContent = item.skinName
            // 将图片和名称添加到skinItem中
            this.skinItem.appendChild(this.skinImg)
            this.skinItem.appendChild(this.skinName)
            // 添加到文档碎片中
            cons.appendChild(this.skinItem)
        })
        // 将文档碎片添加到skinContainer中
        this.skinView.appendChild(cons)
        this.skinContainer.innerHTML = ''
        this.skinContainer.appendChild(this.skinView)
    }

    // 创建皮肤展示盒子
    createSkinShowBox() {
        // 创建皮肤展示盒子
        this.skinShow = document.createElement('div')
        this.skinShow.setAttribute('class', 'skinShow')
        // 创建图片
        this.skinShowImg = document.createElement('img')
        // 将图片添加到皮肤盒子中
        this.skinShow.appendChild(this.skinShowImg)
    }

    // 点击皮肤触发皮肤展示效果
    skinItemShow() {
        this.skinShowImg.src = this.currentRole.skins[0].skinBig
    }

    // 创建右边头像名字和技能容器
    createRightEquip() {
        // 创建用户选用的英雄盒子
        this.userView = document.createElement('div')
        this.userView.setAttribute('class', 'userView')
        // 创建英雄盒子
        this.heroShow = document.createElement('div')
        this.heroShow.setAttribute('class', 'heroShow')
        // 创建选用英雄标签
        this.chioseusername = document.createElement('span')
        this.chioseusername.setAttribute('class', 'chioseusername')
        this.chioseusername.textContent = this.value
        // 将英雄盒子和名字添加到userView中
        this.userView.appendChild(this.heroShow)
        this.userView.appendChild(this.chioseusername)
    }
    // 渲染右边头像名字和技能
    heroItemRender() {
        this.heroShow.innerHTML = ''
        // 创建img
        this.selectHero = document.createElement('img')
        this.selectHero.src = this.currentRole.ico
        this.heroShow.appendChild(this.selectHero)
    }

    // 创建技能盒子
    createSkillBox() {
        this.skillsView = document.createElement('div')
        this.skillsView.setAttribute('class', 'skillsView')
        // 循环创建图片
        this.currentRole.skills.forEach(item => {
            // 创建图片标签
            this.skillViewItem = document.createElement('img')
            this.skillViewItem.src = item
            // 将图片添加到skillsView中
            this.skillsView.appendChild(this.skillViewItem)
        })
        this.game.appendChild(this.skillsView)
    }
}